<template>
    <div>
        <van-nav-bar :title="addr" style="font-weight: bold">
            <template #left>
                <van-icon name="revoke" color="#fdc03a" size="20" @click.native="$router.go(-1)" />
            </template>
        </van-nav-bar>
        <div id="container"></div>
        <div id="panel" style="width: 40%;height: 40%;margin-top: 2.2em;margin-right: -12px;"></div>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {

    data() {
        return {
            data: '',
            value: '',
            addr: '',
            lng: '',
            lat: '',
            sLng:'',
            sLat:'',
        }
    },
    mounted() {
        let that = this
        let url = `http://39.108.211.154:8080/list_text?did=${this.$route.query.mid}`
        this.axios.get(url).then(res => {
            // console.log('获取地址', res);
            this.addr = res.data[0].lname
        })
        window._AMapSecurityConfig = {
            securityJsCode: 'c44d70c1aaaf8e580a7fc791437ad418',
        }
        AMapLoader.load({
            key: "fe9929930cd1c890752c9a32e44c92f2",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.Geocoder', 'AMap.Marker', 'AMap.Driving', 'AMap.CitySearch', 'AMap.CitySearch']       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
            let geocoder = new AMap.Geocoder({
                radius: 1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
                extensions: "all", //返回地址描述以及附近兴趣点和道路信息，默认“base”
                city: this.addr
            });

            geocoder.getLocation(this.addr, function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    // result中对应详细地理坐标信息
                    // console.log(result);
                    // console.log(result.geocodes[0].location.lng);
                    // console.log(result.geocodes[0].location.lat);
                    that.lng = result.geocodes[0].location.lng
                    that.lat = result.geocodes[0].location.lat

                    that.map = new AMap.Map("container", {
                        resizeEnable: true,
                        center: [that.lng, that.lat],
                    })   //设置地图容器id;

                    // 驾车路线
                    let driving = new AMap.Driving({
                        map: that.map,
                        panel: "panel"
                    })

                    // 获取城市定位
                    let citySearch = new AMap.CitySearch()
                    citySearch.getLocalCity(function (status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            // 查询成功，result即为当前所在城市信息
                            console.log('当前所在城市',result);
                            that.sLng=result.bounds.southWest.lng
                            that.sLat=result.bounds.southWest.lat
                            
                            driving.search(new AMap.LngLat(that.sLng,that.sLat), new AMap.LngLat(that.lng, that.lat), function (status, result) {
                                if (status === 'complete') {
                                    // console.log('绘制驾车路线完成' + result)
                                } else {
                                    // console.log('获取驾车数据失败：' + result)
                                }
                            })
                        }
                    })

                    // 放大缩小
                    let scale = new AMap.Scale();
                    that.map.addControl(scale);

                    // 比例尺
                    let tool = new AMap.ToolBar({
                        position: 'RB',
                        offset: [10, 30],
                        showButton: true,
                    });
                    that.map.addControl(tool);

                }
            })

        }).catch(e => {
            // console.log(e);
        })
    }
}
</script>

<style lang="scss" scoped>
#panel {
    position: fixed;
    background-color: white;
    max-height: 90%;
    overflow-y: auto;
    top: 10px;
    right: 10px;
    width: 280px;
}

#panel .amap-call {
    background-color: #009cf9;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#panel .amap-lib-driving {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: hidden;
}

::v-deep .amap-icon img {
    position: fixed !important;
}

#panel .amap-call {
    background-color: #009cf9;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#panel .amap-lib-transfer {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: hidden;
}

#container {
    position: absolute;
    bottom: 0vh;
    width: 100%;
    height: 100vh;
    margin: 0;
    margin-top: 0;
}

.van-nav-bar .van-icon {
    color: black;
}

.van-nav-bar__text {
    color: black !important;
}

.van-search__content {
    border: 1px solid rgb(0, 0, 0, 0.3);
    box-shadow: 0 0 2px 0 rgb(0, 0, 0, 0.5) inset;
    background-color: rgb(255, 255, 255, .3);
}

::v-deep .van-nav-bar__left {
    padding: 0;
}

::v-deep .van-nav-bar__content {
    margin: 12px;
    margin-top: 0;
}
</style>

</style>